<template>
  <div class='subject-rank'>
    <div class="headers">
      <el-tabs>
        <div>
          <el-col :span="12">
            <el-link type="primary"
                     :underline="false">
              <i class="bottom-line"></i> 热门学科排名
            </el-link>
          </el-col>
          <el-col :span="6">
            <el-button size="medium"
                       :class="{activeTabDate:isWeekShow}"
                       ref="week"
                       @click="onWeekData">按周</el-button>
            <el-button size="medium"
                       @click="onMonthData"
                       :class="{activeTabDate:isMonthShow}">按月</el-button>
            <el-button size="medium"
                       @click="onYearData"
                       :class="{activeTabDate:isYearShow}">按年</el-button>
          </el-col>
          <el-col :span="6">
            <el-date-picker v-model="time"
                            :format="format"
                            :type="isdate"
                            @change="dateChange"
                            placeholder="选择日期">
            </el-date-picker>
          </el-col>
        </div>
      </el-tabs>
      <el-row>
        <el-col :span="12">
          <div class="zys-header">学科排名</div>
          <div ref="chart1"
               style="width:100%;height:420px"></div>
        </el-col>
        <el-col :span="12">
          <div class="zys-header">热门课程TOP10</div>
          <div ref="chart2"
               style="width:100%;height:420px"></div>
        </el-col>
      </el-row>
    </div>
    <div class="glay"></div>
    <div class="bottom">
      <el-row>
        <el-col :span="8">
          <el-link type="info"
                   :underline="false"
                   class="zys-header">{{this.category1[0]}}</el-link>
          <el-table :data="tableData"
                    stripe
                    style="width: 100%">
            <el-table-column type="index"
                             width="50"
                             label="排名">
            </el-table-column>
            <el-table-column prop="courseName"
                             width="210"
                             label="热门课程">
            </el-table-column>
            <el-table-column prop="userNum"
                             width="70"
                             label="用户数">
            </el-table-column>
            <el-table-column prop="weekPercent"
                             width="120"
                             sortable
                             label="涨幅">
              <template slot-scope="scope">
                <i>{{scope.row.weekPercent.toFixed(2)}}%
                  <i class="el-icon-top"
                     style="color: rgb(237, 122, 145);"
                     v-if="scope.row.weekCompare===1"></i>
                  <i class="el-icon-bottom"
                     style="color: rgb(153, 231, 164);"
                     v-else></i>
                </i>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <el-link type="info"
                   class="zys-header"
                   :underline="false">{{this.category1[1]}}</el-link>
          <el-table :data="tableData1"
                    stripe
                    style="width: 100%">
            <el-table-column type="index"
                             width="50"
                             label="排名"
                             :span="4">
            </el-table-column>
            <el-table-column prop="courseName"
                             width="210"
                             label="热门课程">
            </el-table-column>
            <el-table-column prop="userNum"
                             width="70"
                             label="用户数">
            </el-table-column>
            <el-table-column prop="weekPercent"
                             width="120"
                             sortable
                             label="涨幅">
              <template slot-scope="scope">
                <i>{{scope.row.weekPercent.toFixed(2)}}%
                  <i class="el-icon-top"
                     style="color: rgb(237, 122, 145);"
                     v-if="scope.row.weekCompare===1"></i>
                  <i class="el-icon-bottom"
                     style="color: rgb(153, 231, 164);"
                     v-else></i>
                </i>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="8">
          <el-link type="info"
                   class="zys-header"
                   :underline="false">{{this.category1[2]}}</el-link>
          <el-table :data="tData"
                    stripe
                    style="width: 100%">
            <el-table-column type="index"
                             width="50"
                             label="排名">
            </el-table-column>
            <el-table-column prop="courseName"
                             width="210"
                             class="kecheng"
                             label="热门课程">
            </el-table-column>
            <el-table-column prop="userNum"
                             width="70"
                             label="用户数">
            </el-table-column>
            <el-table-column prop="weekPercent"
                             width="120"
                             sortable
                             label="涨幅">
              <template slot-scope="scope">
                <i>{{scope.row.weekPercent.toFixed(2)}}%
                  <i class="el-icon-top"
                     style="color: rgb(237, 122, 145);"
                     v-if="scope.row.weekCompare===1"></i>
                  <i class="el-icon-bottom"
                     style="color: rgb(153, 231, 164);"
                     v-else></i>
                </i>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
    <div class="glay1"></div>
    <div class="glay2"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import { getsubjectRank, getHotSubject } from '@/api/course.js'
export default {
  name: 'subjectRank',
  components: {},
  props: {},
  data() {
    return {
      isWeekShow: true,
      isMonthShow: false,
      isYearShow: false,
      isdate: 'week',
      time: new Date(),
      format: 'yyyy 年 第 WW 周',
      category1: [],
      barData1: [],
      category2: [],
      barData2: [],
      datePickerSel: this.$options.filters['week'](new Date()),
      tableData: [],
      tableData1: [],
      tData: [],
      subjectId: ['1-10', '1-8', '1-11']
    }
  },
  computed: {},
  watch: {},
  methods: {
    onWeekData() {
      this.isWeekShow = true
      this.isMonthShow = false
      this.isYearShow = false
      this.isdate = 'week'
      this.format = 'yyyy 年 第 WW 周'
      this.datePickerSel = this.$options.filters['week'](this.time).toString()
      // console.log(this.datePickerSel);
      this.loadSubjectRank()
      this.loadHotSubject()
      this.loadManagement()
      this.loadDevelopment()
      this.loadMaintenance()
      this.disciplineRanking()
    },
    onMonthData() {
      this.isWeekShow = false
      this.isMonthShow = true
      this.isYearShow = false
      this.format = 'yyyy 年 M 月'
      this.isdate = 'month'
      this.datePickerSel = this.$options.filters['month'](this.time).toString()
      this.loadSubjectRank()
      this.loadHotSubject()
      this.loadManagement()
      this.loadDevelopment()
      this.loadMaintenance()
      this.disciplineRanking()
    },
    onYearData() {
      this.isWeekShow = false
      this.isMonthShow = false
      this.isYearShow = true
      this.isdate = 'year'
      this.format = 'yyyy 年'
      this.datePickerSel = this.$options.filters['year'](this.time).toString()
      this.loadSubjectRank()
      this.loadHotSubject()
      this.loadManagement()
      this.loadDevelopment()
      this.loadMaintenance()
      this.disciplineRanking()
    },
    dateChange() {
      if (this.isdate === 'month') {
        //  this.datePickerSel=this.$options.filters['month'](this.time).toString()
        this.onMonthData()
      } else if (this.isdate === 'year') {
        //  this.datePickerSel=this.$options.filters['year'](this.time).toString()
        this.onYearData()
      } else {
        //  this.datePickerSel=this.$options.filters['week'](this.time).toString()
        this.onWeekData()
        //  console.log(this.$options.filters['week'](this.time).toString());
        // console.log(this.datePickerSel)
      }
    },
    async loadSubjectRank() {
      this.category1 = []
      this.barData1 = []
      const { data: res } = await getsubjectRank({
        datePickerSel: this.datePickerSel,
        type: this.isdate,
        orderBy: 'userNum',
        order: 'descending'
      })
      // console.log(this.isdate);
      res.result.forEach(item => {
        this.category1.push(item.subjectName)
        this.barData1.push(item.userNum)
        this.subjectId.push(item.subjectId)
      })
      // console.log(this.subjectId);
      // console.log(this.category1);
    },
    async loadHotSubject() {
      this.category2 = []
      this.barData2 = []
      const { data: res } = await getHotSubject({
        datePickerSel: this.datePickerSel,
        type: this.isdate,
        orderBy: 'userNum',
        order: 'descending',
        limit: '10'
      })
      // console.log(this.time);
      res.result.forEach(item => {
        this.category2.push(item.courseName)
        this.barData2.push(item.userNum)
      })
    },
    async loadManagement() {
      const { data: res } = await getHotSubject({
        datePickerSel: this.datePickerSel,
        type: this.isdate,
        orderBy: 'userNum',
        order: 'descending',
        limit: '5',
        subjectId: this.subjectId[0]
      })
      // console.log(res);
      this.tableData = res.result
    },
    async loadDevelopment() {
      const { data: res } = await getHotSubject({
        datePickerSel: this.datePickerSel,
        type: this.isdate,
        orderBy: 'userNum',
        order: 'descending',
        limit: '5',
        subjectId: this.subjectId[1]
      })
      // console.log(res);
      this.tableData1 = res.result
    },
    async loadMaintenance() {
      // console.log(this.subjectId[2]);
      const { data: res } = await getHotSubject({
        datePickerSel: this.datePickerSel,
        type: this.isdate,
        orderBy: 'userNum',
        order: 'descending',
        limit: '5',
        subjectId: this.subjectId[2]
      })
      // console.log(res);
      this.tData = res.result
    },
    disciplineRanking() {
      setTimeout(() => {
        const chart = this.$refs.chart1
        if (chart) {
          const myChart = this.$echarts.init(chart)
          //初始化数据
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            yAxis: {
              type: 'category',
              data: this.category1,
              splitLine: { show: false },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              offset: 10,
              nameTextStyle: {
                fontSize: 15
              }
            },
            series: [
              {
                type: 'bar',
                data: this.barData1,
                barWidth: 16,
                barGap: 10,
                smooth: true,
                label: {
                  normal: {
                    // show: true,
                    position: 'right',
                    offset: [5, -2],
                    textStyle: {
                      color: '#F68300',
                      fontSize: 13
                    }
                  }
                },
                itemStyle: {
                  emphasis: {
                    barBorderRadius: 7
                  },
                  normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: '#3977E6' },
                      { offset: 1, color: '#37BBF8' }
                    ])
                  }
                }
              }
            ]
          }
          myChart.setOption(option)

          window.addEventListener('resize', function() {
            myChart.resize()
          })
        }
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function() {
            myChart.resize()
          })
        })
      }, 0)
      setTimeout(() => {
        const chart = this.$refs.chart2
        if (chart) {
          const myChart = this.$echarts.init(chart)
          //初始化数据
          var option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'category',
              data: this.category2,
              splitLine: { show: false },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              }
            },
            yAxis: {
              min: 9840, //取0为最小刻度
              max: 9980, //取100为最大刻度
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              offset: 10,
              nameTextStyle: {
                fontSize: 15
              }
            },
            series: [
              {
                type: 'bar',
                data: this.barData2,
                barWidth: 16,
                barGap: 10,
                smooth: true,
                label: {
                  normal: {
                    // show: true,
                    position: 'right',
                    offset: [5, -2],
                    textStyle: {
                      color: '#F68300',
                      fontSize: 13
                    }
                  }
                },
                itemStyle: {
                  emphasis: {
                    barBorderRadius: 7
                  },
                  normal: {
                    barBorderRadius: 7,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      { offset: 0, color: '#3977E6' },
                      { offset: 1, color: '#37BBF8' }
                    ])
                  }
                }
              }
            ]
          }
          myChart.setOption(option)

          window.addEventListener('resize', function() {
            myChart.resize()
          })
        }
        this.$on('hook:destroyed', () => {
          window.removeEventListener('resize', function() {
            myChart.resize()
          })
        })
      }, 0)
    }
  },
  created() {
    // this.dateChange()
    // this.loadSubjectRank()
    // this.loadHotSubject()
    // this.loadManagement()
    // this.loadDevelopment()
    // this.loadMaintenance()
  },
  updated() {
    this.disciplineRanking()
  },
  mounted() {
    // this.disciplineRanking()
    this.onWeekData()
  },
  directives: {
    onWeekData: {
      inserted(el, binging) {
        el.click()
        //$(el).trigger('click')
      }
    }
  }
}
</script>
<style lang='less' scoped>
.headers {
  height: 580px;
}
.subject-rank {
  position: relative;
  padding: 20px 30px 30px 30px !important;
}
.bottom {
  margin-top: 30px;
  margin-left: 35px;
  height: 332px !important;
  .el-col {
    height: 364px !important;
    padding-right: 34px;
    
  }
}
/deep/.el-table::before{
  height: 0 !important;
}
/deep/.cell {
  overflow: hidden;

  white-space: nowrap;

  text-overflow: ellipsis;
}
/deep/::-webkit-scrollbar {
  width: 0px;
}
.glay {
  position: absolute;
  top: 596px;
  left: -33px;
  width: 200%;
  height: 10px;
  background-color: #f5f5f5;
}
.glay1 {
  position: absolute;
  top: 595px;
  left: 483px;
  width: 10px;
  height: 399px;
  background-color: #f5f5f5;
}
.glay2 {
  position: absolute;
  top: 595px;
  left: 923px;
  width: 10px;
  height: 399px;
  background-color: #f5f5f5;
}
.el-date-editor {
  margin-left: 12px;
}
/deep/.el-link--inner {
  position: relative;
  height: 100%;
  line-height: 40px;
  font-size: 16px;
}
/deep/.el-tabs--top {
  height: 40px;
}
/deep/.el-tabs {
  margin-bottom: 40px;
}
/deep/.el-link--inner {
  font-size: 16px !important;
}
.el-button {
  border: none;
}
.activeTabDate {
  background-color: #079fff;
  color: #fff;
}
.bottom-line {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 3px;
  background-color: #65ded7;
}
</style>